import React, { Component } from 'react'
import "./Tabbar.scss";



export default class Tabbar extends Component {
    state = {
        tabbar_active :'home',
        hashMatch:{
            home: "/home",
            sort: "/sort",
            cart: "/cart",
            my: "/my",
        }
    }
    tabChange = (activeName) => {
        console.log(this.props)
        console.log(activeName);
        this.props.history.push(this.state.hashMatch[activeName])

    }
    hashChange=(params) => {
        let activeTab = this.props.match.url.split('/')[1];
        this.setState({
            tabbar_active:activeTab
        })
    }
    componentDidMount(){
        // 刷新页面时维持历史选中状态
        let activeTab = this.props.match.url.split('/')[1];
        this.setState({
            tabbar_active:activeTab
        })
        // 监听哈希路由变化
        window.addEventListener('hashchange',this.hashChange)
    }
    componentWillUnmount(){
        window.removeEventListener('hashchange',this.hashChange)
    }
    render() {
        return (
            <div className="tabbarContainer">
                {/* 内容主体 */}
                <div className="tabbarContent">{this.props.children}</div>
                {/* 底部导航栏 */}
                <div className="tabbar">
                    <div className="tabber_item" onClick={this.tabChange.bind(this,'home')}>
                        <i className={this.state.tabbar_active==='home'?'icon icon-home-o':'icon icon-home'}></i>
                        <span className={this.state.tabbar_active==='home' ? 'title active':'title'}>首页</span>
                    </div>
                    <div className="tabber_item" onClick={this.tabChange.bind(this,'sort')}>
                        <i className={this.state.tabbar_active==='sort' ? 'icon icon-community-o':'icon icon-community'}></i>
                        <span className={this.state.tabbar_active==='sort' ? 'title active':'title'}>分类</span>
                    </div>
                    <div className="tabber_item" onClick={this.tabChange.bind(this,'cart')}>
                        <i className={this.state.tabbar_active==='cart' ? 'icon icon-cart-o':'icon icon-cart'}></i>
                        <span className={this.state.tabbar_active==='cart' ? 'title active':'title'}>购物车</span>
                    </div>
                    <div className="tabber_item" onClick={this.tabChange.bind(this,'my')}>
                        <i className={this.state.tabbar_active==='my' ? 'icon icon-my-o':'icon icon-my'}></i>
                        <span className={this.state.tabbar_active==='my' ? 'title active':'title'}>我的</span>
                    </div>
                </div>
            </div>
        )
    }
}
